<template>
<div  v-if="category">

    <navbar >  </navbar>

    <div class="categorytab">
        <div class="category-ico" @click="$router.push('/editcategory')"><van-icon name="setting-o" style="margin-left:-15px" /></div>
        <van-tabs v-model="active"  sticky  >
            <van-tab v-for="(item,i) in category" :key="i" :title="item.title" >
                
                <van-list
                    v-model="item.loading"
                    :finished="item.finished"
                    finished-text="没有更多了"
                    @load="onLower"
                    :immediate-check="false"
                 >
                    <div  class="detail_parent" >
                        <detail  class="detail_item" v-for="(cateItem,cateIndex) in item.list" :key="cateIndex"  :detailItem="cateItem"></detail>
                    </div>

                </van-list>

            </van-tab>
        </van-tabs>
    </div>

    

</div>
</template>

<script>

    import navbar from "../components/common/navbar.vue"
    import detail from "./detail.vue"

export default {
    data() {
        return {
           category:[],
           active:0,//当前分类的索引
           list: [],
            loading: false,
            finished: false,
        };
    },

    //页面活跃的情况下调用。这里是因为页面不销毁事件，导致添加或者删除了分类栏目之后没有变化
    activated(){
        if(localStorage.getItem('newCat')){
            let newCat = JSON.parse(localStorage.getItem('newCat'))
            this.category = this.changeCategory(newCat)
            this.selectArticle()
        }
        
    },

    methods: {

        //获取首页分类标题
       async selectCategory(){

        //    有本地储存 就执行这个，没有就获取数据
           if(localStorage.getItem('newCat')){
               //因为前面的 activated() 方法，所以这里就省略不用了。
            //    let newCat = JSON.parse(localStorage.getItem('newCat'))
            //    this.category = this.changeCategory(newCat)
            //     this.selectArticle()
            //     return
           }

            //获取首页分类标题
            const res = await this.$http.get('/category')
            //    this.category = res.data
                // this.changeCategory(res.data)
            
            this.category = this.changeCategory(res.data);
            this.selectArticle();
       },

        //添加属性
       changeCategory(data){
           //用map 对已有的 data 进行遍历全部的改造,这里添加一个属性 list
           let category1 = data.map((item,index)=>{
               item.list = []
               item.page = 0
               item.pagesize = 10

               item.finished = false
               item.loading = true

               return item//把item return 出去
           })
          return category1
       },

        //发送请求获取文章
       async selectArticle(){
           const categoryitem = this.categoryItem()//调用方法接收索引，是一个对象，里面有索引,page,pagesize
           

         const res = await this.$http.get("/detail/" + categoryitem._id, {
            params: {
            page: categoryitem.page,
            pagesize: categoryitem.pagesize
          }
         });

         categoryitem.list.push(...res.data);
         categoryitem.loading = false

         if(res.data.length<categoryitem.pagesize){
             categoryitem.finished = true
         }


       },

        //每次分类的索引改变时，都会重新获取新的索引值
       categoryItem(){
           //active 改变之后在分类列表上接收这个分类基本信息的id值
           const categoryitem = this.category[this.active];
        //    console.log(categoryItem);
           
        //    categoryItem  可以 ._id 获取当前id值
           return categoryitem;
       },

        //滑动--触底事件
        onLower() {
            let categoryitem = this.categoryItem()
            categoryitem.page+=1
            setTimeout(() => {
                this.selectArticle() 
            }, 1000);
            
        }

       


    },


    components:{
        navbar,detail
    },

    created(){
        this.selectCategory()
        this.categoryItem()
        this.selectArticle()
        
    },

    watch:{
        active(){
            this.categoryItem()
            this.selectArticle()
        }
    }



    }
</script>


<style scoped >

    .detail_parent{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .detail_item{
        width:45%;
        margin-bottom: 2.667vw;
    }

    .categorytab{
  position: relative;
}
  .category-ico{
    position: absolute;
    z-index: 5;
    right: 0;
    top: 1.944vw;
    padding: 1.389vw 2.778vw;
    background-color: white;
  }

  
 

</style>